<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSX语法小练习</title>
</head>
<body>
    <!-- 引入React核心库 -->
    <script src="../JS/react.development.js"></script>
    <!-- 引入ReactDOM，用于支持react操作DOM -->
    <script src="../JS/react-dom.development.js"></script>
    <!-- 引入babel 用于将书写的JSX语法 编译成JS语法 -->
    <script src="../JS/babel.min.js"></script>
    <div id="test"></div>

    <script type="text/babel">
        /*
            一定注意区分：【js语句(代码)】与【js表达式】
                1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
                    下面这些都是表达式：
                        (1). a
                        (2). a+b                    
                        (3). demo(1)
                        (4). arr.map()
                        (5). function(){}
                2. 语句(代码)：
                    下面这些都是语句/代码：
                        (1).if(){}
                        (2).for(){}
                        (2).switch(){case}

        */
        const data = ['Angular','React','Vue']    //你给react数组 他会自动帮你遍历，给对象就不可以
       let VDOM = (
        <div>
            <h1>
                前端JS框架列表
            </h1>
            <ul>
               {
                data.map((i,index)=><li id={index}>{i}</li>)
               }
            </ul>
        </div>
       )
       ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>